<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <script src="bootstrap/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    
</head>
<body>
    <div id="container" style='width: 80%;margin:80px auto;'>
        <table class="table table-bordered table-hover">
            <h1 class="text-center text-info">购物车</h1>
            <thead>
                <tr class="text-danger">
                    <th class="text-center" style="font-size: 18px;">商品编号</th>
                    <th class="text-center" style="font-size: 18px;">商品名称</th>
                    <th class="text-center" style="font-size: 18px;">购买数量</th>
                    <th class="text-center" style="font-size: 18px;">商品单价</th>
                    <th class="text-center" style="font-size: 18px;">商品总价</th>
                    <th class="text-center" style="font-size: 18px;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center" v-for="(iphone,index) in products">
                    <td style='font-size: 18px;'>{{iphone.id}}</td>
                    <td style='font-size: 18px;'>{{iphone.name}}</td>
                    <td style='font-size: 18px;'>
                        <button class="btn btn-primary btn-primary1" data-toggle="modal" @click="doReduce(index)"> - </button><input type="text" style ="padding-left:20px;" v-model="iphone.count">
                        <button class="btn btn-primary" @click="doAdd(index)"> + </button>
                    </td>
                    <td style='font-size: 18px;'>{{'￥'+iphone.price}}</td>
                    <td style='font-size: 18px;'>{{'￥'+iphone.sumPrice}}</td>
                    <td style='font-size: 18px;'>
                        <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=index">删除</button>
                    </td>
                   
                </tr>
             

                <tr v-show="products.length!=0" class="text-center">
                    <td style='font-size: 22px;color:grey' colspan="2">总数量:{{sumC}}</button></td>
                    <td style='font-size: 22px;color:grey' colspan="2">总金额:{{sumMoney}}</td>
                    <td  style='font-size: 20px;' colspan="2">
                           <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=-1">清空购物车</button>
                       </td>
                </tr>
                <tr  v-show="products.length==0" class="text-center text-muted">
                       <td colspan="6">
                           <p>宝贝没有了....</p>
                       </td>
                   </tr>
                     <!-- 模态框 -->
            <div class="modal fade" role="dialog" id="del">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示信息</h4>
                    </div>
                    <div class="modal-body text-center">

                         <p>确认要删除 {{products[nowIndex]?products[nowIndex].name+'用户':'所有用户'}} 吗？</p>
                         <!-- <p v-show="nowIndex=index">确认要删除 {{products[nowIndex]?products[nowIndex].name:''}} 吗？</p>
                         <p v-show="nowIndex==-1">确认要删除所有用户吗？</p> -->
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"  @click="remove()">确认</button>
                    </div>
                </div>
                </div>
            </div>
</div>
                
            </tbody>
        </table>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#container',
        data:{
            products:[
                {
                  id:1001,
                  name:'iphone5S',
                  count:1,
                  price:4000,
                  sumPrice:4000
                },
                {
                  id:1005,
                  name:'iphone6',
                  count:1,
                  price:5000,
                  sumPrice:5000
                },
                {
                  id:2001,
                  name:'imac',
                  count:1,
                  price:7000,
                  sumPrice:7000
                },
                {
                  id:2004,
                  name:'ipad',
                  count:1,
                  price:2000,
                  sumPrice:2000
                }
            ],  
            nowIndex:-1,
        },
        computed:{
            sumC(){
                let countSum = 0;
                this.products.forEach(element => {
                    // console.log(element)
                    countSum += element.count;

                });
                return countSum ;
            },
            sumMoney(){
                let countMoney=0;
                this.products.forEach(element =>{
                    countMoney += element.sumPrice;
                });
                return countMoney;
            }
        },
        methods:{
            remove:function(){
                if(this.nowIndex==-1){//删除所有的iphone
                    this.products=[];
                }else{
                    this.products.splice(this.nowIndex,1);
                }
            },
            doAdd(index){
                this.products[index].count++;
                this.products[index].sumPrice = this.products[index].count* this.products[index].price;
                // console.log(this.products[index].count++);
            },
            doReduce(index){
                this.nowIndex = index;
                if( this.products[index].count>1){
                    this.products[index].count--;
                    this.products[index].sumPrice = this.products[index].count* this.products[index].price;
                    // $(".btn-primary1").removeAttr("data-target")
                }else{
                    console.log(1111111111)
                    // $(".btn-primary1").attr("data-target","#del")
                    $('#del').modal('show');
                }
            }
        }
    });
    //  vm.$mount('#container');

</script>
</html>